<template>
  <view class="select-picker">
    <view class="header">
      <view class="line"></view>
    </view>
    <view class="content">
      <view class="title2" v-if="title">{{ title }}</view>
      <view class="check-list">
        <view class="check-item" @click="handleCheckAllChange">
          <view class="check-item-icon" :class="checkAll ? 'checked' : ''"></view>
          <view class="check-item-content">全部</view>
        </view>
        <view class="check-item" v-for="(item, index) in list" :key="index" @click="bindChange(item)">
          <view class="check-item-icon" :class="value.includes(item.value) ? 'checked' : ''"></view>
          <view class="check-item-content">{{ item.label }}</view>
        </view>
      </view>
    </view>
    <view class="select-picker-bottom">
      <view class="select-picker-save" @click="handleSave">确定</view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		// 传入数组
		multiple: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array
		},
		type: {
			type: Number,
			default: 1
		},
		keyVal: {
			type: String,
			default: 'brandName'
		},
		title: {
			type: [String, Array],
			default: []
		},
		active: {
			type: Array
		}
	},
	data() {
		return {
			value: this.active,
			checkAll: false
		};
	},
	watch: {
		active(newValue) {
			this.value = newValue;
			this.checkAll = this.value.length === this.list.length;
		}
	},
	computed: {},
	created() {
	},
	methods: {
		handleCheckAllChange() {
			this.checkAll = !this.checkAll;
			if (this.checkAll) {
				this.value = this.list.map(item => item.value);
			} else {
				this.value = [];
			}
		},
		bindChange(item, index) {
			console.log(item, 'e的值');
			if (this.value.includes(item.value)) {
				this.value.splice(this.value.indexOf(item.value), 1);
			} else {
				this.value.push(item.value);
			}
			this.checkAll = this.value.length === this.list.length;
			this.$emit('bindChange', item, index);
		},
		handleSave() {
			console.log('点击了保存');
			setTimeout(() => {
				this.$emit('close', this.value);
			}, 300);
		}
	}
};
</script>
<style lang="scss" scoped>
.select_item {
  display: flex;
  justify-content: center;
  align-items: center;
  // color: #0091ff;
  // padding-bottom: 30rpx;
}

.select-picker {
  background: #ffffff;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 30;

  .header {
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    height: 67rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    //border-top: 2rpx solid #eeeeee;

    .line {
      width: 64rpx;
      height: 10rpx;
      opacity: 1;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  .content {
    .title {
      display: flex;
      // flex: 1;
      width: 100%;

      .title-item {
        font-size: 32rpx;
        display: flex;
        flex: 1;
        justify-content: center;
        padding: 36rpx 0 30rpx 0;
        color: #333333;
        font-weight: 500;

        text {
          margin-left: 24rpx;
        }
      }
    }

    .title2 {
      font-weight: bold;
      color: #333333;
      font-size: 32rpx;
      padding: 20rpx 30rpx;
      border-bottom: 2rpx solid #eeeeee;
      margin-top: -40rpx;
    }
  }

  .select-picker-bottom {
    padding: 30rpx 40rpx;

    .select-picker-save {
      display: flex;
      color: #fff;
      font-weight: 500;
      height: 70rpx;
      background: #0091ff;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
    }
  }
}

.check-list {
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
  max-height: 50vh;
  overflow: auto;

  .check-item {
    border-bottom: 2rpx solid #EEEEEE;
    display: flex;
    align-items: center;
    padding: 28rpx 0;
    color: #333333;

    &-icon {
      min-width: 32rpx;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      background-color: #ffffff;
      border: 2rpx solid #cccccc;
      margin-right: 8rpx;
      font-size: 28rpx;
    }

    .checked {
      border: 1px solid transparent;
      background-image: url("https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/%E4%B8%8B%E8%BD%BD.png");
      background-size: 32rpx 32rpx;
      background-repeat: no-repeat;
    }
  }

  & > .check-item:nth-last-child(1) {
    border-bottom: 0;
  }
}
</style>
